import "./index.less";
import { useNavigate } from "react-router-dom";
import { PageHeaderNew } from "@/components";
import { Badge, Tabs } from "antd-mobile";
import { useEffect, useState } from "react";
import TabList from "./components/tabList";
import { getActivityList } from "./service";

const tabsList = [
  { name: "全部", key: "" },
  { name: "社区资讯", key: "info" },
  { name: "政策解读", key: "unscramble" },
  { name: "办事指南", key: "guide" },
  { name: "普法宣传", key: "disseminate" },
];

export default function CommunityInformation() {
  const navigate = useNavigate();
  const [activeKey, setActiveKey] = useState<string | undefined>();
  const [listData, setListData] = useState<any>();
  const [pageTitle, setPageTitle] = useState<string>();

  const getList = async () => {
    try {
      const res = await getActivityList({
        sendType: pageTitle,
        messageType: "1",
      });
      if (res?.success && res?.code === 200) {
        setListData(res?.data);
        console.log(res?.data);
      }
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    if (pageTitle === "" || pageTitle) getList();
  }, [pageTitle]);
  useEffect(() => {
    switch (activeKey) {
      case "":
        setPageTitle("");
        break;
      case "info":
        setPageTitle("社区资讯");
        break;
      case "unscramble":
        setPageTitle("政策解读");
        break;
      case "guide":
        setPageTitle("办事指南");
        break;
      case "disseminate":
        setPageTitle("普法宣传");
        break;
      default:
        break;
    }
  }, [activeKey]);
  useEffect(() => {
    let type = location.search?.split("=")[1];
    setActiveKey(type);
  }, []);

  return (
    <div className="ci_contarnier">
      <div className="header-bg"></div>
      <PageHeaderNew title="资讯共享" goBack={() => navigate("/")} />

      <div className="ci_content">
        <div className="ci_content_tabs">
          <div className="ci_ct_box">
            <Tabs
              activeKey={activeKey}
              onChange={(v: string) => setActiveKey(v)}
              style={{ background: "#fff" }}
            >
              {tabsList?.map((item: any) => {
                return (
                  <Tabs.Tab
                    key={item.key}
                    title={
                      <Badge
                        content=""
                        style={{ "--right": "-10px", "--top": "8px" }}
                      >
                        {item.name}
                      </Badge>
                    }
                  ></Tabs.Tab>
                );
              })}
            </Tabs>
          </div>
        </div>
        <div className="ci_content_content">
          <TabList data={listData} type={activeKey} typeName={pageTitle} />
        </div>
      </div>
    </div>
  );
}
